<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ JSON.stringify(text) == '{}' ? '添加学生组织指导老师' : '修改学生组织指导老师' }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<a-form-model ref="ruleForm" :model="form" :rules="rules">
					<a-form-model-item label="类型" prop="Type">
						<a-select optionFilterProp="children" showSearch v-model="form.Type">
							<template v-for="(item, index) in TypeList">
								<a-select-option :key="item.Key">{{ item.Value }}</a-select-option>
							</template>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="学生组织" prop="ClubID">
						<a-select optionFilterProp="children" showSearch v-model="form.ClubID" disabled>
							<template v-for="(item, index) in ClubIDList">
								<a-select-option :key="item.ID">{{ item.Name }}</a-select-option>
							</template>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="学号/工号" prop="UserNo">
						<a-select showSearch optionFilterProp="children" style="width: 100%" v-model="form.UserNo"
							@search="fetchUser" :filterOption="filterOption">
							<a-spin v-if="fetching" slot="notFoundContent" size="small" />
						 <a-select-option v-for="(item, index) in userList" :key="item.UserNo">
								{{ item.UserNo }}&nbsp;|&nbsp;{{ item.Name }}</a-select-option>
						</a-select>
					</a-form-model-item>

					<a-form-model-item label="" class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">
							{{ JSON.stringify(text) == '{}' ? '确认添加' : '确认修改' }}</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-model-item>
				</a-form-model>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		AddClubTeacher,
		GetCommonAssistantList,
		UpdateClubTeacher,
		getClubPageList,
		GetTeacherTypeList,
		GetUserList
	} from '@/api/follow';
	export default {
		props: {
			text: Object
		},
		watch: {
			text: function(text) {
				if (JSON.stringify(text) == '{}') {
					this.form.ClubID = this.$route.query.ID
				} else {
					this.form = text;
					this.form.ClubID = this.$route.query.ID
				}
			}
		},
		data() {
			return {
				ClubIDList: [],
				userList: [],
				TypeList: [],
				fetching: false,
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				DepartmenDropdowntList: [],
				form: {
					ClubID: '',
					UserNo: '',
					Type: ''
				},
				rules: {
					ClubID: [{
						required: true,
						message: '请选择学生组织',
						trigger: 'change'
					}],
					UserNo: [{
						required: true,
						message: '请选择人员',
						trigger: 'change'
					}],
					Type: [{
						required: true,
						message: '请选择老师类型',
						trigger: 'change'
					}]
				}
			};
		},
		created() {
			this.getOtherList();
		},
		methods: {
			async getOtherList() {
				let data = {}
				data.pageIndex = 1
				data.pageSize = 999
				let res = await getClubPageList(data)
				this.ClubIDList = res.data.data
				let res1 = await GetTeacherTypeList()
				this.TypeList = res1.data.data
			},
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
			},
			async fetchUser(value) {
				this.fetching = true
				let myReg = /^[^a-zA-Z]+$/
				if (value && value.length > 1) {
					let data = {}
					data.key = value
					data.type = 2
					data.top = 20
					let res = {}
					if (this.form.Type === 2) {
						data.isAssistant = true
						res = await GetCommonAssistantList(data)
					} else {
						res = await GetUserList(data)
					}
					this.fetching = false
					this.userList = res.data.data
				}
			},
			closeFunction(data) {
				this.$emit('closeFun', data);
				this.form = {};
			},
			handleSubmit(e) {
				this.$refs.ruleForm.validate(async valid => {
					if (valid) {
						let data = this.form;
						let res = {}
						if (JSON.stringify(this.text) == '{}') {
							res = await AddClubTeacher(data);
						} else {
							res = await UpdateClubTeacher(data);
						}
						if (res.data.code === 0) {
							this.$message.success(res.data.msg);
							this.closeFunction('1');
						} else {
							this.$message.error(res.data.msg);
						}
					} else {
						return false;
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ant-form-item {
		margin: 20px 50px;

	}

	/deep/.ant-form-item-label {
		width: 100px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}

	/deep/.ant-form {
		margin-top: 50px;
		padding-bottom: 50px;
	}
</style>
